<%@page import="edu.uit.se.laps.web.model.LoaiSanPham"%>
<%@page import="edu.uit.se.laps.web.model.TaiKhoan"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!-- pageEncoding="UTF-8"%> -->
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ page
	import="edu.uit.se.laps.web.*,edu.uit.se.laps.web.controller.*, java.net.*,java.text.*,java.util.*"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.taotk{
	background: red;
	height: 40px;
	color: white;
	font-size: 18px;
	cursor: pointer;
	border: none;	
	margin: 20px 0px;
}

.taotk:hover{
	background: #8F2400;
}

.like{
	margin: 20px 0px;
}
</style>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Detail</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script language="javascript" src="1.7.2.jquery.min.js"></script>
	
	<script src="social-likes.min.js"></script>
	<link rel="stylesheet" href="css/social-likes.css">
</head>
<body>
	<tiles:insertTemplate template="Template.jsp">

	<tiles:putAttribute name="focusbody">
		
		<%
			ShoppingCart cart = (ShoppingCart) session
					.getAttribute("ShoppingCart");
	
			if (cart == null) {
				cart = new ShoppingCart();
				session.setAttribute("ShoppingCart", cart);
			}
		%>
		
		<div class="thu"></div>
		<s:set name="cur_idsp" value="%{#attr['idsp']}"/>
		
		<%-- <script>
			var bienthu = "<s:property value='#cur_idsp'/>";
			$('.thu').append(bienthu);
		</script> --%>
		<s:iterator value="spList" var="sp">
		
		<s:if test="idSP == #cur_idsp">
		
		<div class="detail">
			<div class="imgPro">
					<div class="show"><s:property value='srcImgCT'/></div>
					<script>
						var inputStr1 = $('.show').text();
						$('.show').text("");
						var parts1 = inputStr1.split(",");
						var len1 = parts1.length;
						/* $('.show').append(len1); */
						for(var i = 0; i < len1; i++){
							$('.show').append("<img src= '" + parts1[i] + "'/>");
						}
						
					</script>
				<div class="thumb"></div>
			</div>
		
			<div class="infoPro">
				<div class="tenSP"><s:property value="tenSP"/></div>
				<div class="gioithieuSP"><s:property value="moTa"/></div>
				<div class="giaSP"><s:property value="gia"/></div>
				<s:form action="addtoshoppingcart" method="post">
				<div class="soluongmua">Số Lượng<label style="color:red">*</label> <input type="number" name="soLuongMua" size="3" required="on" min="1"/></div>
				<div class="iconmuaSP">
				
<%-- 				<a href="addtoshoppingcart?idsp=<s:property value="idSP"/>"><img src="sources/icon/muangay.png"/></a> --%>
				
				<input type="hidden" name="idspstr" value="${idSP}"/>
<%-- 				${idsp} --%>
<!-- 				<input type="hidden" name="soLuongMua" value="#slmua"/>				 -->
				<input class="taotk" type="submit" value="Mua ngay"/>
				
				
				 
				
				
				
				</div>
				</s:form>
				<div class="trangthaiSP">Còn &nbsp;<span id="soluong"><s:property value="soLuongTon"/></span>&nbsp; bộ</div>
				<div class="text"></div>
				
				<div class="like">
					<ul class="social-likes">
						<li class="facebook" title="Share link on Facebook">Facebook</li>
						<li class="twitter" title="Share link on Twitter">Twitter</li>
						<li class="plusone" title="Share link on Google+">Google+</li>
					</ul>
			</div>
			</div>
			
			
		</div><!--Phan chua hinh anh va thong tin detail  -->
		
		<div class="fea_con">
			<div class="feature">
				<div class="head">Điểm nổi bậc</div>
				<div class="fea_focus"><s:property value="DacDiem"/></div>
				<script type="text/javascript">
					var inputStr2 = $('.fea_focus').text();
					$('.fea_focus').text("");
					var parts2 = inputStr2.split("#");
					var len2 = parts2.length;
					
					for(var i = 0; i < len2; i++){
						$('.fea_focus').append("<br>" + parts2[i]);
					}
					
					
					function reverse (s) {
					    var o = '';
					    for (var i = s.length - 1; i >= 0; i--)
					        o += s[i];
					    return o;
					}

					function format (s) {
					    var o = '';
					    for (var i = 0; i < s.length ; i++){
					    	if(i%3 == 0 && i!=0){
					    		o += "." + s[i] ;	
					    	}else{
					    		o += s[i];
					    	}
					    	
					    }
					    return o;
					}

					
					var rateStr = [];
					
					//Input thong tin gia tien vao rateStr
					
					var temp = parseInt($('.infoPro').find('.giaSP').text(), 10);
					var ee = String(temp);
					var re = reverse(ee);
					var fo = format(re);
					var giaSP = reverse(fo);
					//rateStr.push(reverse(fo));

					$('.rate').text("");
					//Out put thong tin gia tien ra
					$('.infoPro').find('.giaSP').text(giaSP);
					$('.infoPro').find('.giaSP').append("<sup>đ</sup>");
					
				</script>
			</div>
			<div class="condition">			
				<div class="head">Điều kiện</div>
				<div class="con_focus"><s:property value="DieuKien"/></div>
				<script type="text/javascript">
					var inputStr3 = $('.con_focus').text();
					$('.con_focus').text("");
					var parts3 = inputStr3.split("#");
					var len3 = parts3.length;
					for(var i = 0; i < len3; i++){
						$('.con_focus').append("<br>" + parts3[i]);
					}
				</script>
			</div>
		</div>
		</s:if>
		</s:iterator>
		
		<div class="imgContent">
			<div class="connua" style="text-align: center"><img src="sources/icon/arrowDown.png"/></div>
			<!-- <div id="rowPicId" class="rowPic"></div> -->
			<div class="rowPic">
				<s:set name="myListSize" value="%{#attr['spList'].size}"/>
				<s:set name="start" value="%{#attr['start']}" />
				<s:set name="stop" value="%{#attr['stop']}" />
				<s:set name="curidsp" value="%{#attr['idsp']}" />
				
					<s:iterator begin="#start" end="#stop" value="spList">
							<%-- <s:if test="spList[start] != null"> --%>
							
							<div class="frame" id="<s:property value="idSP" />">
								<a href="detail?idsp=<s:property value="idSP"/>" id="1">
									<img class="thumbIMG" src="<s:property value="srcImg" />"/></a>
								<div class="above"><a class="thongtin">Số Lượng: <s:property value="soLuongTon" /></a></div>
								<div class="under">
									<div class="infor"><s:property value="tenSP" /></div>
									<div class="rate"><s:property value="gia" /></div>
									<a href="detail?idsp=<s:property value="idSP"/>">
										<img src="sources/icon/next.png">
									</a>
								</div>
							</div>
							<%-- </s:if> --%>
					</s:iterator>
			</div>
	 	 </div>
	  
	  <div class="paging">
	  	<a class="pre"></a>
	  	<a class="tab1" href="">1</a>
	  	<a class="tab2" href="">2</a>
	  	<a class="tab3" href="">3</a>
	  	<a class="tab4" href="">4</a>
	  	<a>...</a>
		<a class="nex"></a>
	<script>
	var soluonghinh = 9;
	$('.pre').text("<<");
	$('.nex').text(">>");
  	var value_stop = parseInt("<s:property value='%{#myListSize}'/>");
  	var checkCount = parseInt(value_stop/soluonghinh + 1);
	var value_cur = parseInt("<s:property value='%{#start}'/>");
	
	var stop;/*Kiem tra tab cuoi cung co thoa de hien san pham ko */
	
	var value = parseInt(1);
	if(value <= 0){
		value = 1;
	}
	if(value >= checkCount){
		value = checkCount - 3;
	}
	
	if(checkCount == 1){
		$('.tab1').text(value);
		$('.tab2').remove();
		$('.tab3').remove();
		$('.tab4').remove();
		$('.pre').remove();
		$('.nex').remove();
	}else if(checkCount == 2){
		$('.tab1').text(value);
		$('.tab2').text(value + 1);
		$('.tab3').remove();
		$('.tab4').remove();
		$('.pre').remove();
		$('.nex').remove();
	}else if(checkCount == 3){
		$('.tab1').text(value);
		$('.tab2').text(value + 1);
		$('.tab3').text(value + 2);
		$('.tab4').remove();
		$('.pre').remove();
		$('.nex').remove();
	}else{
		$('.tab1').text(value);
		$('.tab2').text(value + 1);
		$('.tab3').text(value + 2);
		$('.tab4').text(value + 3);
	}
	
	$('.pre').click(function(){
		value = value - 1;
		if(value <= 0)
			value = 1;
		$('.tab1').text(value);
		$('.tab2').text(value + 1);
		$('.tab3').text(value + 2);
		$('.tab4').text(value + 3);
	});

	$('.nex').click(function(){
		value = value + 1;
		if(value >= checkCount - 3){
			value = checkCount - 3;
			
		}
		$('.tab1').text(value);
		$('.tab2').text(value + 1);
		$('.tab3').text(value + 2);
		$('.tab4').text(value + 3);
	});
	
		
		
		$(function() {
			$.fn.getCurId=function(){
				$(this).click(function(){
					var t = $(this).text();
					var s = t-1;
					if(t == checkCount){
						stop = s*soluonghinh + (value_stop - (s*soluonghinh) - 1);
					}else{
						stop = s*soluonghinh + soluonghinh - 1;
					}
	  			var hre = "detail?start= " + (s*soluonghinh) + "&stop= " + stop + "&idsp= <s:property value='#cur_idsp'/>";
	  			$(this).attr('href',hre);
				});
				
  		};
		});
		$(function() {
			$(".tab1").getCurId();
			$(".tab2").getCurId();
			$(".tab3").getCurId();
			$(".tab4").getCurId();
		});
/*
 * Tao Paging de chuyen trang
 * param: pre, nex
 * 
 * */
	$('.frame IMG').css({'cursor':'pointer'});
		$('.paging').css({'position':'relative','height':'40px', 'width':'100%',
			'margin-bottom':'40px'});
		$('.paging a').css({'line-height':'40px','text-align':'center','float':'left','height':'40px', 
		'width':'40px', 'background':'green', 'margin-left':'10px','cursor':'pointer', 'color':'white',
		'text-decoration':'none'});
		
		$('.paging a.pre').css({'background':'#B80000'});
		$('.paging a.nex').css({'background':'#B80000'});
		
		$(function() {
			$.fn.hoverTab=function(){
  			$(this).hover(function(){
	  			$(this).css({'background': '#003D00'});
	  		}, function(){
	  			$(this).css({'background': 'green'});
	  		});
  		};
		});
		$(function() {
			$(".tab1").hoverTab();
			$(".tab2").hoverTab();
			$(".tab3").hoverTab();
			$(".tab4").hoverTab();
		});
		
		/*
		 * Chuyen dinh dang Gia tien tu: 99888 --> 99.888
		 * Ham: reverse() --> Dao nguoc chuoi
		 * Ham: format() --> Dinh dang lai Gia tien cho de nhin
		 * */
		function reverse (s) {
		    var o = '';
		    for (var i = s.length - 1; i >= 0; i--)
		        o += s[i];
		    return o;
		}

		function format (s) {
		    var o = '';
		    for (var i = 0; i < s.length ; i++){
		    	if(i%3 == 0 && i!=0){
		    		o += "." + s[i] ;	
		    	}else{
		    		o += s[i];
		    	}
		    	
		    }
		    return o;
		}

		var countFra = $('.rowPic .frame').find('.rate').length;
		var rateStr = [];
	//In put thong tin gia tien vao rateStr
		for(var i = 0; i < countFra; i++){
			var temp = parseInt($('.rowPic .frame:eq(' + i + ')').find('.rate').text(), 10);
		var ee = String(temp);
		var re = reverse(ee);
		var fo = format(re);
		rateStr.push(reverse(fo));
		}

		$('.rate').text("");
	//Out put thong tin gia tien ra
		for(var i = 0; i < rateStr.length; i++){
			$('.rowPic .frame:eq(' + i + ')').find('.rate').text(rateStr[i]);
			$('.rowPic .frame:eq(' + i + ')').find('.rate').append("<sup>đ</sup>");
		}
	</script>
	  </div>
	</tiles:putAttribute>
	
	</tiles:insertTemplate>
</body>
</html>